<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>小剧场选座</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/app.css" type="text/css"/>
</head>
<body>
<div class="wrap">
    <div class="box">
        <div class="header">
            <!--<div class="filmName" style="font-size: 20px;" >cdshcdhukusdvdvfv</div>-->
            <div class="hallFilmTime" style="font-size: 20px;">ihdvfjixdhdiudsj</div>
            <div class="hallSerialNumber" style="font-size: 20px;">jxj;sdjdsjdsvjd</div>
        </div>
        <div class="tittle">
            <div class="t_1">
                <span class="sp1"></span>
                <p>可选</p>
            </div>
            <div class="t_2">
                <span class="sp2"></span>
                <p>已选</p>
            </div>
            <div class="t_3">
                <span class="sp3"></span>
                <p>已售</p>
            </div>
        </div>
        <img src="../image/pingmu.png" class="pingmu">
        <div class="content">
            <div class="one" pai="1">
                <ul>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                </ul>
            </div>
            <div class="two" pai="2">
                <ul>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                    <li typ="0" onClick="check(this)"></li>
                </ul>
            </div>

        </div>
        <div class="zw">
            <p>已选座位<span>最多可以选择5个座位</span></p>
            <div class="yxz"></div>
        </div>
    </div>
    <div class="footer">
        <a href="../html/order.html" class="f_right">确认选座</a>
    </div>
</div>
<script type="text/javascript" src="../js/cinema/jquery.min.js"></script>
<script type="text/javascript" src="../js/cinema/common.js"></script>
<script type="text/javascript">
    //判断页面加载完成
    window.onload = function () {
        if (document.readyState == "complete") {
            $("body").show();
        }
    };
    var arr = []; //已选座位数组

    /*
     遍历检查售票状态
     typ ==0 可选
     typ ==1 已选
     typ ==2 已售
     */
    $(".content li").each(function (index) {
        var typ = $(".content li").eq(index).attr("typ");
        if (typ == "2") {
            $(".content li").eq(index).css("background", "#0099ff");
        }
    });
    //已选座位添加
    function add(msg) {
        var html = '<div>' + msg + '</div>';
        return html;
    }
    //选座点击事件
    function check(dom) {
        var txt = $(dom).parent().parent().attr('pai') + "排" + parseInt($(dom).index() + 1) + "座";
        var typ = $(dom).attr("typ");
        if (typ == "0") {
            if (arr.length > 4) {
                alert("一人只能选择5个座位！");
                return false;
            } else {
                $(dom).css("background", "#fe3f55");
                $(dom).attr("typ", "1");
                arr.push(txt);
                $(".yxz").append(add(txt));
                $(".num").text(arr.length);//已选电影票数量
            }
        } else if (typ == "2") {
            alert("该座位已售出！");
            return false;
        } else {
            $(dom).css("background", "#f5f5f5");
            $(dom).attr("typ", "0");
            var index = arr.indexOf(txt);
            arr.removeByValue(txt);//指定数组删除
            $(".yxz div").eq(index).remove();
            $(".num").text(arr.length);//已选电影票数量
        }
    }
    //数组删除指定元素方法
    Array.prototype.removeByValue = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    }
</script>
<script src="../js/cinema/seat.js" charset="UTF-8"></script>
</body>
</html>